<template>
  <view class="content" :style="{ backgroundImage: 'url(' + bg_pic + ')' }">
    <view class="pnz_eliminating_wrap">
      <view class="nav">
        <view class="navTop">
          <!-- <view class="navTop-left">
						关卡<text>{{ currentLevel }}</text>
						<text v-if="currentLevel == 1">-一星级</text>
						<text v-if="currentLevel == 2">-二星级</text>
						<text v-if="currentLevel == 3">-三星级</text>
						<text v-if="currentLevel == 4">-四星级</text>
						<text v-if="currentLevel == 5">-五星级</text>
					</view> -->
          <view class="navTop-right"> 目标分{{ day_max_score }} </view>
          <!-- <view class="relu" @click="openPup">
						规则
					</view> -->
        </view>

        <view class="navBot">
          <view
            class="navBot-top"
            :style="{ width: panel.x * cell_length + 'px' }"
          >
            <view class="">
              已获得
              <text class="navBot-text" :style="{ color: t('color2') }">{{
                integral * ratio
              }}</text>
              积分
            </view>
            <view class="">
              今日已获得
              <text class="navBot-text" :style="{ color: t('color2') }">{{
                day_user_get_score
              }}</text>
              积分
            </view>
          </view>

          <!-- <view class="navBot-box" :style="{background:t('color2')}">
						<view class="navBot-box-inner"
							:style="[{width: (integral / day_max_score) * 100 + '%',background: t('color1') }]">
						</view>
					</view> -->
          <view
            class="navBot-container"
            :style="{ width: panel.x * cell_length + 'px' }"
          >
            <view class="navBot-box" :style="{ width: '100%' }">
              <view
                class="navBot-box-inner"
                :style="[
                  {
                    width: ((integral * ratio) / day_max_score) * 100 + '%',
                    background: t('color1'),
                  },
                ]"
              >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pnz_panel_wrap" @click="clickEvent">
        <view
          v-for="(item, index) in all_data"
          :key="index"
          class="single_line"
        >
          <view
            class="single_cell star_base"
            :style="[singleCellStyle(single_item)]"
            :class="[singleCellClass(single_item)]"
            v-for="(single_item, single_index) in item"
            :key="single_index"
          >
          </view>
        </view>
      </view>
      <view class="resetting">
        <view class="resetting-img" @click="resetting(2)">
          <image
            src="https://pic.hedashepin.com/upload/3/20250516/3da5a5d471dc86982a95f859fc6a06e9.png"
            mode="aspectFit"
          ></image>
          <text class="btn-text">重开</text>
        </view>
        <view class="resetting-img" @click="gameOver">
          <image
            src="https://pic.hedashepin.com/upload/3/20250516/da99def350dc9197145cb48fe81d884b.png"
            mode="aspectFit"
          ></image>
          <text class="btn-text">结束</text>
        </view>
      </view>
      <!-- <view class="rule-txt" :style="{color:t('color1')}">
				<view class="rule-txt-title"> 规则: </view>
				<view class="rule-txt-desc">
					1、如果有三个以上同颜色的图案在一条线上，则点击其中一个即可将这三个图案及周边的同颜色图案消除。
				</view>
				<view class="rule-txt-desc">
					2、如果有色块与相邻色块互换后可形成三个以上同颜色的图案在一条线上，先点击一个确认，再点击另一个可进行互换后则会自动消除。
				</view>
				<view class="rule-txt-desc">3、每日最高可获得{{day_max_score}}积分，每100积分可抵扣商品金额1元。 </view>
				<view class="rule-txt-desc">4、点击结束兑换。 </view>
			</view> -->
      <view class="rule-txt">
        <parse :content="content" @navigate="navigate"></parse>
      </view>
      <uni-popup ref="rulePopup" type="center" :mask-click="false">
        <view class="popup-container" @click="toNext">
          <image
            class="pop-img"
            src="https://pic.hedashepin.com/upload/3/20250516/635b9e53e9dc4d349c81f2a26bd04a58.png"
            mode="widthFix"
          ></image>
          <view class="popup-text">
            <view class="text-line1"
              >恭喜您今日已成功获得{{ totalScore }}积分！</view
            >
            <view class="text-line2">限时特惠</view>
            <view class="text-line2">快来商城兑换心仪好礼~</view>
          </view>
        </view>
        <view class="" @click="closePup">
          <image
            class="reward-close"
            src="https://pic.hedashepin.com/upload/3/20250516/a00ad53ac4c4f3de381bf38227fd42e8.png"
            mode=""
          >
          </image>
        </view>
        <!-- <view class="rule-popup">
					<view class="popup-header">
						<text class="popup-title">游戏规则</text>
						<view class="close-btn" @click="closePup">×</view>
					</view>
					<view class="popup-content">
						<view class="rule-item">1、如果有三个以上同颜色的图案在一条线上，则点击其中一个即可将这三个图案及周边的同颜色图案消除。
						</view>
						<view class="rule-item">2、如果有色块与相邻色块互换后可形成三个以上同颜色的图案在一条线上，先点击一个确认，再点击另一个可进行互换后则会自动消除。</view>
						<view class="rule-item">3、每日最高积分为500。</view>
					</view>
					<view class="popup-footer" :style="{background:t('color1')}" @click="closePup">
						<text>我知道了</text>
					</view>
				</view> -->
      </uni-popup>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      all_data: [],
      star_total: 6,
      panel: {
        x: 8,
        y: 8,
      },
      cell_length: 40, //默认尺寸
      current_clicked_item: null, //当前已经选中的棋子
      is_blinking: false,
      currentLevel: 1, // 关卡
      //day_max_score: 500, // 目标分数
      integral: 0, //当前积分
      datalist: [],
      page: 1,
      limit: 10,
      loading: false,
      noMore: false,
      finish_url: "",
      coupon_active_id: "",
      showRulePopup: false,
      day_max_score: 0, //每日最高获取分数
      day_user_get_score: 0, //每日可获取的分数
      bg_pic: "",
      static_url: app.globalData.static_url,
      pre_url: app.globalData.pre_url,
      content: "",
      ratio: "",
    };
  },

  onLoad() {
    this.getlist();
    const pendingData = uni.getStorageSync("gamePendingScore");
    if (pendingData) {
      const data = JSON.parse(pendingData);
      this.integral = data;
    }
    this.init();
  },
  computed: {
    totalScore() {
      return (
        parseInt(this.integral) * this.ratio + parseInt(this.day_user_get_score)
      );
    },
  },
  methods: {
    getlist() {
      if (this.loading) return;

      this.loading = true;
      let that = this;

      uni.showLoading({
        title: "加载中",
      });

      app.get(
        "Coupon/getCouponActiveList",
        {
          page: this.page,
          limit: this.limit,
          type: 3,
        },
        function (res) {
          uni.hideLoading();
          that.loading = false;

          if (res.code == 200) {
            // 获取第一个活动的 finish_url
            if (res.data && res.data.length > 0) {
              that.finish_url = res.data[0].finish_url;
              that.coupon_active_id = res.data[0].coupon_active_id;

              // 在这里调用详情接口，确保coupon_active_id已设置
              that.getdatail();
            }

            // 判断是否没有更多数据
            that.noMore = res.data.length < that.limit;

            if (that.page === 1) {
              that.datalist = res.data || [];
            } else {
              that.datalist = [...that.datalist, ...(res.data || [])];
            }
          } else {
            uni.showToast({
              title: res.msg || "加载失败",
              icon: "none",
            });
          }
        },
        function (err) {
          uni.hideLoading();
          that.loading = false;
          uni.showToast({
            title: "网络错误",
            icon: "none",
          });
        }
      );
    },

			getdatail() {
				var that = this;
				if (!that.coupon_active_id) {
					return;
				}
				app.get('Coupon/getCouponActiveDetial', {
					coupon_active_id: that.coupon_active_id
				}, function(res) {
					if (res.code == 200) {
						that.day_max_score = res.data.day_max_score;
						that.day_user_get_score = res.data.day_user_get_score || 0;
						that.bg_pic = res.data.pic;
						that.content = res.data.content;
						that.ratio = res.data.ratio
					} else {

					}
				}, function(err) {
					console.error('获取详情失败:', err);
					app.error(res.msg)
				});
			},
			resetting() {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否确认清除当前积分并重新开局？",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							that.init();
							that.integral = 0;
						} else if (res.cancel) {
							// console.log('点击取消');
						}
					},
				});
			},
			gameOver() {
				if (this.day_max_score == 0) {
					return
				}
				var that = this;
				that.showRulePopup = true;
				// 如果使用uni-popup组件
				that.$refs.rulePopup.open();
				// uni.showModal({
				// 	title: "恭喜您的520之旅",
				// 	showCancel: true,
				// 	cancelText: "取消",
				// 	cancelColor: "#000000",
				// 	confirmText: "开启礼遇",
				// 	confirmColor: "#3CC51F",
				// 	content: "获得" + that.integral + "积分！",
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			that.putActiveScore();
				// 			that.integral = 0;
				// 			that.init();
				// 			uni.navigateTo({
				// 				url: that.finish_url
				// 			})
				// 		} else if (res.cancel) {
				// 			console.log('用户点击了取消');
				// 			that.integral = 0;
				// 			that.init();
				// 		}
				// 	},
				// });
			},
			toNext() {
				var that = this;
				// 保存到本地存储
				uni.setStorageSync('gamePendingScore', JSON.stringify(that.integral));
				that.putActiveScore();

			},
			putActiveScore() {
				const that = this;
				const pendingData = {
					score: that.integral,
					coupon_active_id: that.coupon_active_id,
					timestamp: Date.now(),
					finish_url: that.finish_url
				};

				app.post('Coupon/putActiveScore', {
					coupon_active_id: that.coupon_active_id,
					score: that.integral * that.ratio,
				}, function(res) {
					if (res.code == 200) {
						// 成功提交后清除缓存
						uni.removeStorageSync('gamePendingScore');
						that.clearPendingScore();
						that.integral = 0;
						that.init();
						that.closePup();
						uni.reLaunch({
							url: that.finish_url
						});
					}

				});
			},
			// 新增清理待提交积分方法
			clearPendingScore() {
				uni.removeStorageSync('pendingGameScore');
			},

    // 新增恢复积分方法
    restorePendingScore() {
      const pendingDataStr = uni.getStorageSync("pendingGameScore");
      if (pendingDataStr) {
        try {
          const pendingData = JSON.parse(pendingDataStr);

          // 检查是否过期（24小时内有效）
          if (Date.now() - pendingData.timestamp > 86400000) {
            this.clearPendingScore();
            return false;
          }

          this.integral = pendingData.score;
          this.coupon_active_id = pendingData.coupon_active_id;
          return true;
        } catch (e) {
          console.error("解析待提交积分数据失败:", e);
          this.clearPendingScore();
          return false;
        }
      }
      return false;
    },
    init() {
      const currentIntegral = this.integral; // 保存当前积分
      this.initAllData();
      this.integral = currentIntegral; // 恢复积分
      this.clearInitialMatches();
    },
    getDefaultItem(x, y) {
      return {
        x: x,
        y: y,
        star_num: parseInt(Math.random() * this.star_total) + 1,
        is_deleted: false,
        is_selected: false,
      };
    },
    initAllData() {
      this.all_data = [];
      //获得数据
      for (var j = 0; j < this.panel.y; j++) {
        var temp_line = [];
        for (var i = 0; i < this.panel.x; i++) {
          temp_line.push(this.getDefaultItem(i, j));
        }
        this.all_data.push(temp_line);
      }
      //   todo 先清理下所有相同的点
      // 检查并消除初始匹配项
      this.clearInitialMatches();
    },
    clearInitialMatches() {
      let hasMatches = false;

      // 第一次扫描：标记所有初始匹配项
      for (let y = 0; y < this.panel.y; y++) {
        for (let x = 0; x < this.panel.x; x++) {
          const item = this.all_data[y][x];
          const matches = this.checkIfCanEliminating(item, this.all_data);
          if (matches && matches.length >= 3) {
            hasMatches = true;
            matches.forEach((match) => {
              this.$set(match, "is_deleted", true);
            });
          }
        }
      }

      // 如果有匹配项，执行清除和补充
      if (hasMatches) {
        this.is_blinking = true;
        setTimeout(() => {
          this.clearMatrixAndAddSupplement(this.all_data);
          this.is_blinking = false;

          // 递归检查，直到没有更多初始匹配
          this.$nextTick(() => {
            this.clearInitialMatches();
          });
        }, 750);
      }
    },
    markMatrixDeletedTag(all_matrix) {
      var temp_matrix = JSON.parse(JSON.stringify(all_matrix));
      for (var y in temp_matrix) {
        for (var x in temp_matrix[y]) {
        }
      }
    },
    singleCellStyle(single_item) {
      return {
        width: this.cell_length + "px",
        height: this.cell_length + "px",
      };
    },
    singleCellClass(single_item) {
      var dest_class = "";
      dest_class += "star" + single_item.star_num;
      if (single_item.is_selected) {
        dest_class += " selected";
      }
      if (single_item.is_deleted) {
        dest_class += " deleted";
      }
      return dest_class;
    },
    itemSelected(now_item) {
      if (this.current_clicked_item) {
        this.$set(this.current_clicked_item, "is_selected", false);
      }

      this.current_clicked_item = now_item;
      this.$set(now_item, "is_selected", true);
      //    再算出可以到的点
    },
    checkCanEliminateAndClear() {
      this.$set(this.current_clicked_item, "is_selected", false);
      this.current_clicked_item = null;
      this.is_blinking = true;
      setTimeout(() => {
        //查下是否有同样的点
        this.clearMatrixAndAddSupplement(this.all_data);
        this.is_blinking = false;
      }, 750);
    },

    clickEvent(e) {
      if (this.is_blinking) {
        return false;
      }
      var offset_x = e.detail.x - e.currentTarget.offsetLeft;
      var offset_y = e.detail.y - e.currentTarget.offsetTop;
      // 算出 x的 index
      var x_index = this.getLengthIndex(offset_x);
      var y_index = this.getLengthIndex(offset_y);
      console.log(y_index, x_index);
      var now_item = this.all_data[y_index][x_index];
      if (!this.current_clicked_item) {
        //不存在，则是第一次点
        this.itemSelected(now_item);
        var res = this.checkIfCanEliminating(now_item, this.all_data);
        if (res) {
          this.checkCanEliminateAndClear();
        } // //查下是否有同样的点
        return false;
      } else {
        console.log(" 点过了 -------- ");
        //    已经点过了，如果与上一个是同一个 num 则换点
        if (now_item.star_num === this.current_clicked_item.star_num) {
          this.itemSelected(now_item);
          var res = this.checkIfCanEliminating(now_item, this.all_data);
          if (res) {
            this.checkCanEliminateAndClear();
          }
          return false;
        }
        //    如果不是当前的子的前，后，左，右，则重新选子
        var is_next_to = false;
        [
          [this.current_clicked_item.x - 1, this.current_clicked_item.y],
          [this.current_clicked_item.x + 1, this.current_clicked_item.y],
          [this.current_clicked_item.x, this.current_clicked_item.y - 1],
          [this.current_clicked_item.x, this.current_clicked_item.y + 1],
        ].forEach((v) => {
          if (now_item.x === v[0] && now_item.y === v[1]) {
            is_next_to = true;
          }
        });
        if (!is_next_to) {
          //    不是紧临，则是 重新再换一个目标
          this.itemSelected(now_item);
        } else {
          //    是紧临，则看下四方是否可以有可以消的
          //换下 x,y,再看下有没有可以消的，如果两个结局有一个有值 ，则换，并把这些换掉
          var new_matrix = this.getNewMatrix(
            this.current_clicked_item,
            now_item,
            this.all_data
          );
          var temp_now_arr = this.checkIfCanEliminating(
            new_matrix[now_item.y][now_item.x],
            new_matrix
          );
          var temp_from_arr = this.checkIfCanEliminating(
            new_matrix[this.current_clicked_item.y][
              this.current_clicked_item.x
            ],
            new_matrix
          );
          if (!temp_now_arr && !temp_from_arr) {
            //    两个都为空，则不能移动
            console.log("不能移动");
            // this.$set(this.current_clicked_item,'is_selected',false);
            return this.itemSelected(now_item);
          } else {
            console.log("要删了");
            this.$set(this, "all_data", new_matrix);
            this.checkCanEliminateAndClear();
            setTimeout(() => {
              this.clearMatrixAndAddSupplement(this.all_data);
              this.is_blinking = false;

              // 递归检查，直到没有更多初始匹配
              this.$nextTick(() => {
                this.clearInitialMatches();
              });
            }, 750);
          }
        }
      }
    },
    clearMatrixAndAddSupplement(all_matrix) {
      // 清理盘中所有要删除的格子,并补充
      let that = this;
      var temp_matrix = JSON.parse(JSON.stringify(all_matrix));

      for (var x = 0; x <= this.panel.x - 1; x++) {
        //每一个纵列单独查
        var temp_column = [];
        var y = this.panel.y - 1;
        while (y >= 0) {
          if (!temp_matrix[y][x].is_deleted) {
            temp_column.push(temp_matrix[y][x]);
          }
          y--;
        }
        // temp_column 补齐
        var i = 0;
        while (i <= this.panel.y - 1) {
          if (!temp_column[i]) {
            temp_column[i] = this.getDefaultItem(x, i);
            // 增加积分上限判断
            if (this.integral < this.day_max_score) {
              this.integral += 1;
            }
          }
          i++;
        }

					y = this.panel.y - 1;
					while (y >= 0) {
						if (temp_column[this.panel.y - 1 - y]) {
							temp_matrix[y][x] = Object.assign({},
								temp_column[this.panel.y - 1 - y], {
									y: y,
									x: x,
								}
							);
						} else {
							// 没有，则是新生成的一个随机的
							temp_matrix[y][x] = this.getDefaultItem(x, y);
						}
						y--;
					}
				}
				this.$set(this, "all_data", temp_matrix);
				console.log("this.integral", this.integral);
				if (this.currentLevel == 1) {
					// 修改判断条件，只当积分等于目标分时才触发
					var tenum = this.integral * this.ratio
					if (tenum >= this.day_max_score*1) {
						//this.integral = Number(this.day_max_score); // 确保不超过目标分
						this.gameOver();
					}
				}
			},
			getNewMatrix(from_obj, to_obj, all_matrix) {
				var new_matrix = JSON.parse(JSON.stringify(all_matrix));
				var temp_to_item = Object.assign({}, from_obj, {
					x: to_obj.x,
					y: to_obj.y,
					is_selected: false,
				});
				var temp_from_item = Object.assign({}, to_obj, {
					x: from_obj.x,
					y: from_obj.y,
					is_selected: false,
				});
				new_matrix[to_obj.y][to_obj.x] = temp_to_item;
				new_matrix[from_obj.y][from_obj.x] = temp_from_item;
				return new_matrix;
			},
			getItemOrNull(y, x, all_matrix) {
				if (x >= 0 && x <= this.panel.x - 1 && y >= 0 && y <= this.panel.y - 1) {
					//区域内
					return all_matrix[y][x];
				} else {
					return null;
				}
			},
			getNextToSameArr(now_item, all_matrix, is_getting_extra = false) {
				var lx, rx, x, ly, ry, y;
				lx = rx = x = now_item.x;
				ly = ry = y = now_item.y;
				var dest_arr = [];
				var logicFun = (y, x, now_item) => {
					var temp_item = this.getItemOrNull(y, x, all_matrix);
					//有值才查
					if (temp_item && temp_item.star_num === now_item.star_num) {
						if (!temp_item.is_deleted) {
							dest_arr.push(temp_item);
						}
					} else {
						return false;
					}
				};
				var break_flag;
				while (lx > 0) {
					lx--;
					break_flag = logicFun(y, lx, now_item);
					if (break_flag === false) {
						break;
					}
				}
				while (rx < this.panel.x - 1) {
					rx++;
					break_flag = logicFun(y, rx, now_item);
					if (break_flag === false) {
						break;
					}
				}
				while (ly < this.panel.y - 1) {
					ly++;
					break_flag = logicFun(ly, x, now_item);
					if (break_flag === false) {
						break;
					}
				}
				while (ry > 0) {
					ry--;
					break_flag = logicFun(ry, x, now_item);
					if (break_flag === false) {
						break;
					}
				}
				if (is_getting_extra) {
					//    如果要加入额外的 另外处理
					if (dest_arr.length) {
						dest_arr.forEach((v) => {
							all_matrix[v.y][v.x].is_deleted = true;
						});
						var temp_arr = [];
						dest_arr.forEach((v) => {
							var new_arr = this.getNextToSameArr(v, all_matrix, true);
							temp_arr = temp_arr.concat(new_arr);
						});
						dest_arr = temp_arr.concat(dest_arr);
					}
					return dest_arr;
				} else {
					//    首次，则先判断够不够格
					if (dest_arr.length < 2) {
						return false;
					} else if (dest_arr.length === 2) {
						if (
							dest_arr[0].x !== dest_arr[1].x &&
							dest_arr[0].y !== dest_arr[1].y
						) {
							//    两个都不一样，不是一条线，返回 false
							return false;
						}
					}
					//走到此处就是够格了
					//先把这些 dest_arr 中标记为删除
					dest_arr.forEach((v) => {
						all_matrix[v.y][v.x].is_deleted = true;
					});
					all_matrix[now_item.y][now_item.x].is_deleted = true;
					var extra_new_arr = [];
					//    再查下其他的点四周是否有
					dest_arr.forEach((v) => {
						var new_arr = this.getNextToSameArr(v, all_matrix, true);
						extra_new_arr.concat(new_arr);
					});
					dest_arr = dest_arr.concat(extra_new_arr);
					dest_arr.push(all_matrix[now_item.y][now_item.x]);
					return dest_arr;
				}
			},
			checkIfCanEliminating(now_item, all_matrix) {
				return this.getNextToSameArr(now_item, all_matrix);
			},
			getLengthIndex(offset_length) {
				// 算出 x的 index
				var index = 0;
				if (offset_length > 0) {
					index = parseInt(offset_length / this.cell_length);
				}
				return index;
			},
			// 打开规则弹窗
			openPup() {
				this.showRulePopup = true;
				// 如果使用uni-popup组件
				this.$refs.rulePopup.open();
			},
			// 关闭规则弹窗
			closePup() {
				this.showRulePopup = false;
				// 如果使用uni-popup组件
				this.$refs.rulePopup.close();
			},
		},
	};
</script>

<style lang="scss" scoped>
body {
  cursor: pointer;
}

.content {
  width: 750rpx;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.navBot-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20rpx auto 20rpx auto;
}

.pnz_eliminating_wrap {
  text-align: center;
  overflow: auto;

  .nav {
    width: 100%;
    overflow: auto;

    .navTop {
      width: 100%;
      font-size: 36rpx;

      overflow: auto;
      // padding: 10rpx 0 0 44rpx;
      position: relative;

      .navTop-left {
        float: left;

        text {
          color: #feaa18;
        }

        margin-right: 50rpx;
      }

      .relu {
        position: absolute;
        top: 0;
        right: 20rpx;
      }

      .navTop-right {
        // float: left;

        font-size: 36rpx;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        color: rgba(16, 16, 16, 1);

        text {
          color: #feaa18;
        }
      }
    }

    .navBot {
      width: 100%;
      overflow: auto;
      padding-top: 12rpx;

      .navBot-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding-top: 12rpx;
        align-items: center;
      }

      .navBot-text {
        font-size: 38rpx;
        margin: 0 10rpx;
      }

      .navBot-box {
        width: 490rpx;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        border: 2rpx solid #e0e0e0;
        // margin: 8rpx auto 40rpx;

        .navBot-box-inner {
          height: 30rpx;
          width: 75%;
          background: rgb(135, 28, 135);
          border-radius: 20rpx 0px 0px 20rpx;
        }
      }
    }
  }
}

.rule-txt {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  text-align: left;
  color: rgb(135, 28, 135);
}

.rule-txt-title {
  font-weight: bold;
  font-size: 32rpx;
  // margin-bottom: 30rpx;
  // margin-top: 60rpx;
}

.rule-txt-desc {
  font-size: 26rpx;
  // margin-bottom: 20rpx;
}

.pnz_panel_wrap {
  display: inline-flex;
  border: 1px solid #bbb;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  background: #000;
}

.resetting {
  display: flex;
  justify-content: center;
  align-items: center;
  // gap: 40rpx;
  // padding: 30rpx 0;
}

.resetting-img {
  position: relative;
  width: 310rpx;
  /* 根据图片实际大小调整 */
  height: 150rpx;
}

.resetting-img image {
  width: 100%;
  height: 100%;
}

.btn-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  /* 文字颜色 */
  font-size: 32rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  /* 增强可读性 */
  z-index: 2;
  width: 100%;
  text-align: center;
}

.single_line {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.single_cell {
  border: 1px solid #f58494;
  box-sizing: border-box;
}

$length: 30px;

.star_base {
  padding: 2px;
  //background: #ddd;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.star_base.selected {
  border: 3px solid #444;
  opacity: 0.6;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.star_base.deleted {
  //background: #dddddd;
  //box-shadow: none;
  animation: blink 0.2s linear infinite;
}

.star1 {
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/cf6ca404b0d2236488b23b9913cbbf21.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/09399de9b53edd1545c452fd21135f88.png");
  // background-image: url("");

  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star2 {
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/5884d0681d7416ba43da6fbba828084f.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/662be332cb089aec8dcbca69ce52fa80.png");
  // background-image: url("");

  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star3 {
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/d6232181ca1b596cd33fa5e399c275e3.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/2d0dec53443a3c3ec5fe7f86cc82e81d.png");
  // background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star4 {
  // box-shadow: 0 0 $length inset #7e117c;
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/9ac91a6f106d6d7230e886bfedb6573d.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/a1b86cb4a1de30fdf212d0982dfaebd5.png");
  // background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star5 {
  // box-shadow: 0 0 $length inset deeppink;
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/eabbba85e3866d8411d144440f19922c.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/f0ded4c26330870692a21332de4cd4f6.png");
  // background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star6 {
  // box-shadow: 0 0 $length inset #058494;
  // background-image: url('https://pic.hedashepin.com/upload/3/20250515/e8c1af5dd73cbfbf50477270492a8a84.png');
  background-image: url("https://pic.hedashepin.com/upload/3/20250516/1bf4e8df97e463bc03223aeafc3b44da.png");
  // background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.star7 {
  box-shadow: 0 0 $length inset #bb7b07;
}

/* 弹窗样式 */
.rule-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
}

.popup-content {
  padding: 30rpx;
}

.rule-item {
  margin-bottom: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
  text-align: left;
}

.popup-footer {
  padding: 20rpx;
  text-align: center;
  background: #f5f5f5;
  color: #fff;
  font-weight: bold;
}

.popup-container {
  position: relative;
  width: 700rpx;
  /* 根据图片实际宽度调整 */
}

.pop-img {
  width: 100%;
  display: block;
}

.popup-text {
  position: absolute;
  top: 47%;
  /* 垂直位置调整 */
  left: 20rpx;
  width: 100%;
  text-align: center;
  color: #7a2d1d;
  /* 文字颜色 */
  padding: 0 50rpx;
  // box-sizing: border-box;
  font-size: 24rpx;
}

.text-line1 {
  // font-size: 30rpx;
  // font-weight: bold;
  // margin-bottom: 20rpx;
  // text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5); /* 文字阴影增强可读性 */
}

.text-line2 {
  // font-size: 28rpx;
  // text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
}

.reward-close {
  width: 70rpx;
  height: 70rpx;
  margin-top: 20rpx;
}
</style>
